<template>
    <div class="task-view">
      <el-row>
        <el-col :span="20" :offset="2" style="color: #333333">
          <el-row style="background:#ffffff;padding:0 20px">
            <el-col>
              <div class="dialog__header">
                <span class="dialog__title">待办任务</span>
              </div>
            </el-col>
          </el-row>
          <el-row style="background:#ffffff;padding:0 20px">
            <el-form ref="task" :model="task" label-width="100px" :rules="taskRules">
              <el-divider></el-divider>
              <el-row>
                <el-col>
                  <el-form-item label="行动描述:" prop="taskDescribe">
                    <el-input v-model="task.taskDescribe" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"  style="width: 91%"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="执行人:" prop="employeeByExeEmpId.empName">
                    <el-input v-model="task.employeeByExeEmpId.empName" style="width: 91%">
                      <el-button @click="openEmpDialog" slot="append" icon="el-icon-search" ></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="完成期限:">
                    <el-date-picker v-model="task.taskFinishDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 79%"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="时间:">
                    <el-time-picker v-model="task.taskTime" value-format="hh:mm:ss" style="width:79%" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
                                    placeholder="任意时间点">
                    </el-time-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="line-height: 40px">
                  <el-form-item label="优先:">
                    <el-radio-group v-model="task.taskPriority">
                      <el-radio :label="1">高</el-radio>
                      <el-radio :label="2">低</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="客户:" prop="customerByCustomerId.customerName">
                    <el-input :disabled="true" v-model="task.customerByCustomerId.customerName" style="width: 91%"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" style="line-height: 40px">
                  <el-form-item label="联系人:">
                    <el-select v-model="task.taskContactName" placeholder="未选" style="width: 79%">
                      <el-option v-for="(item,index) in contactList" :key="index" :label="item.contactName" :value="item.contactName">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状态:">
                    <el-radio-group v-model="task.taskStatus">
                      <el-radio :label="1">未结束</el-radio>
                      <el-radio :label="2">已结束</el-radio>
                      <el-radio :label="3">取消</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="创建人:" >
                    <el-input v-model="task.employeeByEmpId.empName" :disabled="true" style="width: 79%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="创建时间:">
                    <el-input v-model="task.taskCreateDate" :disabled="true" style="width: 79%"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" :offset="8">
                  <el-form-item>
                    <el-button @click="handleDelete" type="danger">删除</el-button>
                    <el-button @click="saveTask" type="primary">保存</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <!--内层dialog员工-->
            <el-dialog width="30%" title="人员选择" :visible.sync="innerDialogEmp" append-to-body @close="closeInnerDialogEmp">
              <div>
                <el-collapse v-model="activeName">
                  <el-collapse-item v-for ="(dept,index) in deptList" :title="dept.deptName" :key="index" :name="dept.deptId">
                    <ul class="emp-ul">
                      <li @click="choiceEmp(emp)" v-for="(emp,index) in dept.employeeByDeptId">
                        <span v-if="index !== dept.employeeByDeptId.length-1" class="line-style"></span>
                        <span v-if="index === dept.employeeByDeptId.length-1" class="line-style-end"></span>
                        <span class="">{{emp.empName}}</span>
                      </li>
                    </ul>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-dialog>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3">
          <div class="font-15">待办沟通<span style="margin: 0 5px"><i class="el-icon-time"></i></span></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3">
          <div :key="index" v-for="(item,index) in chatRecordList">
            <div class="m-t-10">
              <b>{{item.employeeByEmpId.empName}}：</b>
              <span>{{item.chatRecordDate | formatDate}}</span>
            </div>
            <div class="m-b-10">
              <span class="font-13">{{item.chatRecordContent}}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="1">
          <el-form ref="task" :model="chatRecord" label-width="100px" :rules="taskRules">
            <el-row>
              <el-col>
                <el-form-item>
                  <el-input v-model="chatRecord.chatRecordContent" type="textarea" :rows="2" placeholder="请输入内容" style="width: 89%"></el-input>
                  <el-button @click="saveChat" type="info" plain>发言</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    import {formatTimeToStr} from "../assets/format";

    export default {
       data(){
         return{
           emp:{},
           task: {
             taskId:0,
             taskDescribe:'',
             taskContactName:'',
             taskFinishDate:'',
             taskTime:'',
             taskPriority:'',
             taskStatus:'',
             taskCreateDate:'',
             taskIs:'',
             opportunityByOppId:null,
             customerByCustomerId:{},
             employeeByEmpId:'',
             employeeByExeEmpId:{},
           },
           contactList:[],
           innerDialogEmp: false,// 内层dialog员工
           activeName: [],
           deptList:[],
           taskRules: {
             taskDescribe: [
               {required: true, message: '必须填', trigger: 'blur'}
             ],
             'customerByCustomerId.customerName': [
               { required: true, message: '请选择客户', trigger: 'blur' }
             ],
             'employeeByExeEmpId.empName': [
               { required: true, message: '请选择负责人', trigger: 'blur' }
             ]
           },
           chatRecordList:[],//沟通记录集合
           chatRecord:{
             chatRecordId: 0,
             chatRecordContent: '',
             chatRecordDate:null,
             employeeByEmpId:'',
             taskByTaskId:''
           }
         }
       },
      methods:{
        // 查询当前员工
        loginEmp(){
          this.$axios.get('http://localhost:8088/emp')
            .then(v => {
              this.emp = v.data
            })
            .catch(function (v) {})
        },
        initData(){
          let taskId = this.$route.query.taskId
          this.$axios.get('http://localhost:8088/task-id',{
            params:{
              taskId:taskId
            }
          })
            .then(v => {
              this.task = v.data
              this.choiceContact(this.task.customerByCustomerId.customerId)
            })
            .catch(function (v) {})
        },
        // 查询联系人
        choiceContact(customerId){
          this.$axios.get('http://localhost:8088/contact-list', {
            params: {
              customerId : customerId
            }
          })
            .then(v => {
              this.contactList = v.data
            })
            .catch(function (v) {})
        },
        //查询部门员工
        findDeptList () {
          this.$axios.get('http://localhost:8088/dept-emp-list')
            .then(v => {
              this.deptList = v.data
              for(let i = 1;i <= this.deptList.length;i++){
                this.activeName.push(i)
              }
            })
            .catch(function (v) {})
        },
        //打开员工dialog
        openEmpDialog(){
          this.innerDialogEmp = true
          this.findDeptList()
        },
        // 选择员工
        choiceEmp(val) {
          this.task.employeeByExeEmpId = val
          this.innerDialogEmp = false;
        },
        //关闭员工diglog事件
        closeInnerDialogEmp(){
          this.activeName = []
        },
        // 新增、修改代办任务
        saveTask () {
          // 状态
          this.task.taskIs = 1
          if (this.task.taskId == 0){
            this.task.taskCreateDate = this.addDate()
            this.task.employeeByEmpId = this.emp
          }
          this.$refs.task.validate((valid) => {
            if (valid) {
              this.$axios.post('http://localhost:8088/save-task',
                {
                  taskId:this.task.taskId,
                  taskDescribe:this.task.taskDescribe,
                  taskContactName:this.task.taskContactName,
                  taskFinishDate:this.task.taskFinishDate,
                  taskTime:this.task.taskTime,
                  taskPriority:this.task.taskPriority,
                  taskStatus:this.task.taskStatus,
                  taskCreateDate:this.task.taskCreateDate,
                  taskIs:this.task.taskIs,
                  customerByCustomerId:this.task.customerByCustomerId,
                  employeeByEmpId:this.task.employeeByEmpId,
                  employeeByExeEmpId:this.task.employeeByExeEmpId,
                  opportunityByOppId:this.task.opportunityByOppId
                })
                .then(v => {
                  // 1、刷新数据
                  this.initData()
                  this.$message({
                    message: '已保存',
                    type: 'success'
                  });
                })
                .catch(function (v) {})
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        // 删除
        handleDelete(){
          let taskId = this.$route.query.taskId
          this.$axios.post('http://localhost:8088/save-task',
            this.qs.stringify({taskId: taskId}))
            .then(v => {
              // 1、刷新数据
              this.$router.push('/task')
              this.$message({
                message: '已删除',
                type: 'success'
              });
            })
            .catch(function (v) {})
        },
        // 查询沟通记录
        findChat(){
          let taskId = this.$route.query.taskId
          this.$axios.get('http://localhost:8088/chat-record-list',{
            params:{
              taskId:taskId
            }
          })
            .then(v => {
              this.chatRecordList = v.data
            })
            .catch(function (v) {})
        },
        // 新增沟通记录
        saveChat(){
          this.$axios.post('http://localhost:8088/save-chat-record',
            {
              chatRecordId:this.chatRecord.chatRecordId,
              chatRecordContent:this.chatRecord.chatRecordContent,
              chatRecordDate:this.chatRecord.chatRecordDate,
              employeeByEmpId:this.emp,
              taskByTaskId:this.task
            })
            .then(v => {
              // 1、刷新数据
              this.findChat()
              this.chatRecord = {
                  chatRecordId: 0,
                  chatRecordContent: '',
                  chatRecordDate:null,
                  employeeByEmpId:'',
                  taskByTaskId:''
              }
              this.$message({
                message: '成功',
                type: 'success'
              });
            })
            .catch(function (v) {})

        },
        // 删除提示
        handleDelete () {
          this.$confirm('此操作将永久删除待办任务, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delete()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        // 删除axios
        delete(taskId){
          this.$axios.post('http://localhost:8088/delete-task',
            this.qs.stringify({taskId: this.task.taskId}))
            .then(v => {
              this.$router.push('/task');
            })
            .catch(function (v) {})
        },
      },
      created() {
        this.loginEmp()
        this.initData()
        this.findChat()
      },
      filters: {
        formatDate: function(time) {
          if(time!=null&&time!="")
          {
            var date = new Date(time);
            return formatTimeToStr(date, "MM-dd hh:mm");
          }else{
            return "";
          }
        },}
    }
</script>

<style scoped>

  .font-13{
    font-size: 13px;
  }
  .margin-bo-10{
    margin-bottom:10px;
  }
</style>
